import React, { useState } from 'react'
import useLogin from '../../hooks/useLogin'
import './index.scss'
import MyCards from '../../components/MyCards'
import Mycharts from '../../components/Mycharts'
import { Select, DatePicker } from 'antd';
import dayjs from 'dayjs'
function Index() {

  let {login}=useLogin()
  console.log(login)
  let [data2,setData2]=useState([
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 12.6, 12.2, 32.6, 20.0, 6.4, 3.3
      ])
      const handleChange = (value) => {
  console.log(`selected ${value}`);
  if(value==='全部'){
    setData2([
        10.0, 14.9, 20.0, 123.2, 21245.6, 76.7, 1.6, 12.62, 82.6, 25.0, 46.4, 63.3
      ])
  }else{
      setData2([
        12.0, 21.9, 23.0, 13.2, 25.6, 16.7, 1.02, 13.62, 11.6, 17.10, 14.4, 23.43
      ])
  }
};

const onChange = (date, dateString) => {
  console.log(date, dateString);
  if(dateString===dayjs(new Date()).format('YYYY-MM-DD')){
    setData2([
        12.0, 24.9, 21.0, 15.2, 25.16, 36.7, 10.16, 22.62, 42.6, 15.0, 46.4, 63.3
      ])
  }else if(dateString==='2024-12-22'){
    setData2([
        13.0, 14.9, 21.10, 15.12, 21.16, 13.7, 7.16, 8.62, 9.6, 10.02, 6.4, 3.3
      ])
  }
};



let [data3,setData3]=useState([
        { value: 1048, name: '已完成' },
        { value: 735, name: '未完成' },
        { value: 580, name: '待完成' }
      ])

const handleChange2 = (value) => {
  console.log(`selected ${value}`);
  if(value==='已完成'){
    setData3([
        { value: 248, name: '已完成' },
        { value: 335, name: '未完成' },
        { value: 480, name: '待完成' }
      ])
  }else{
      setData3([
        { value: 748, name: '已完成' },
        { value: 325, name: '未完成' },
        { value: 680, name: '待完成' }
      ])
  }
};

const onChange2 = (date, dateString) => {
  console.log(date, dateString);
  if(dateString===dayjs(new Date()).format('YYYY-MM-DD')){
    setData3([
        { value: 148, name: '已完成' },
        { value: 225, name: '未完成' },
        { value: 380, name: '待完成' }
      ])
  }else if(dateString==='2024-12-22'){
    setData3([
        { value: 448, name: '已完成' },
        { value: 525, name: '未完成' },
        { value: 680, name: '待完成' }
      ])
  }
};


let [data4,setData4]=useState([
      ['product', '代办服务', '代账服务'],
      ['Matcha Latte', 43.3, 85.8],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2],
      ['Walnut Brownie', 72.4, 53.9]
    ])

const handleChange4 = (value) => {
  console.log(`selected ${value}`);
  if(value==='已完成'){
    setData4([
      ['product', '代办服务', '代账服务'],
      ['Matcha Latte', 13.3, 185.8],
      ['Milk Tea', 23.1, 53.4],
      ['Cheese Cocoa', 46.4, 15.2],
      ['Walnut Brownie', 62.4, 23.9]
    ])
  }else{
      setData4([
      ['product', '代办服务', '代账服务'],
      ['Matcha Latte', 23.3, 15.8],
      ['Milk Tea', 80.1, 33.4],
      ['Cheese Cocoa', 86.4, 65.2],
      ['Walnut Brownie', 42.4, 43.9]
    ])
  }
};

const onChange4 = (date, dateString) => {
  console.log(date, dateString);
  if(dateString===dayjs(new Date()).format('YYYY-MM-DD')){
   setData4([
      ['product', '代办服务', '代账服务'],
      ['Matcha Latte', 28.3, 25.8],
      ['Milk Tea', 50.1, 73.4],
      ['Cheese Cocoa', 96.4, 25.2],
      ['Walnut Brownie', 32.4, 93.9]
    ])
  }else if(dateString==='2024-12-22'){
    setData4([
      ['product', '代办服务', '代账服务'],
      ['Matcha Latte', 23.3, 25.8],
      ['Milk Tea', 30.1, 43.4],
      ['Cheese Cocoa', 46.4, 55.2],
      ['Walnut Brownie', 52.4, 63.9]
    ])
  }
};


  var option
  var option2
   var option3
    var option4
  let data=[
     {
        title1:'代办服务',
        title2:'数量',
        color:'#656dec',
        color2:'#a0a0a0',
        val1:12,
        val2:42,
        val3:5,
        span1:'进行中',
        span2:'已完成',
        span3:'已停止'
     },
     {
        title1:'代办服务',
        title2:'金额',
        color:'#656dec',
        color2:'#a0a0a0',
        val1:'￥'+7600,
        val2:'￥'+2400,
        val3:'',
         span1:'已收款',
        span2:'代收款',
         span3:''
      
     },
     {
        title1:'代办服务',
        title2:'数量',
        color:'#656dec',
        color2:'#a0a0a0',
        val1:12,
        val2:5,
         val3:'',
         span1:'本月到期',
        span2:'下月到期',
         span3:''
       
     },
     {
        title1:'代办服务',
        title2:'金额',
        color:'#656dec',
        color2:'#a0a0a0',
       val1:'￥'+7600,
        val2:'￥'+2400,
        val3:'',
         span1:'已收款',
        span2:'代收款',
        span3:''
     }
  ]


  option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  
  legend: {
    data: ['已完成', '已停止', '已收款']
  },
  xAxis: [
    {
      type: 'category',
      data: ['4月', '5月', '6月', '7月', '8月', '9月'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value} '
      }
    },
    {
      type: 'value',
      name: '',
      min: 0,
      max: 25,
      interval: 5,
      axisLabel: {
        formatter: '{value} '
      }
    }
  ],
  series: [
    {
      name: '已完成',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: data2
    },
    {
      name: '已停止',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data:data2
    },
    {
      name: '已收款',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' °C';
        }
      },
      data: data2
    }
  ]
};
 option2= {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  
  legend: {
    data: ['已完成', '已停止', '已收款']
  },
  xAxis: [
    {
      type: 'category',
      data: ['4月', '5月', '6月', '7月', '8月', '9月'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value} '
      }
    },
    {
      type: 'value',
      name: '',
      min: 0,
      max: 25,
      interval: 5,
      axisLabel: {
        formatter: '{value} '
      }
    }
  ],
  series: [
    {
      name: '已完成',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: data2
    },
    {
      name: '已停止',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data:data2
    },
    {
      name: '已收款',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' °C';
        }
      },
      data: data2
    }
  ]
};

option3 = {
  title: {
    text: '我的进度'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: data3
    }
  ]
};

option4 = {
  title: {
    text: '每个月完成情况(金额)'
  },
  legend: {},
  tooltip: {},
  dataset: {
    source: data4
  },
  xAxis: { type: 'category' },
  yAxis: {},
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [{ type: 'bar' }, { type: 'bar' }]
};


  return (
    <div>
      <div className='top'>
          <MyCards data={data[0]}></MyCards>
           <MyCards data={data[1]}></MyCards>
            <MyCards data={data[2]}></MyCards>
             <MyCards data={data[3]}></MyCards>
         
      </div>





       <div className='box'>
        <div className='topInfo'>
           <p className='server'>代办服务</p>
            <p> 
               <Select
      defaultValue="全部"
      style={{
        width: 120,
      }}
      onChange={handleChange}
      options={[
        {
          value: '全部',
          label: '全部',
        },
        {
          value: '部分',
          label: '部分',
        },
      
      ]}
    />
     <DatePicker onChange={onChange} />
    </p>
        </div>
        
       <div className='charts'>
         <Mycharts option={option} width="50%" height="400px" data={data2}></Mycharts>
         <div className='topInfo'>
           <p className='server'>代办服务</p>
            <p> 
               <Select
      defaultValue="全部"
      style={{
        width: 120,
      }}
      onChange={handleChange}
      options={[
        {
          value: '全部',
          label: '全部',
        },
        {
          value: '部分',
          label: '部分',
        },
      
      ]}
    />
     <DatePicker onChange={onChange} />
    </p>
        </div>
        
          <Mycharts option={option2} width="50%" height="400px" data={data2}></Mycharts>
       </div>
        
       </div>
          <Select
      
      style={{
        width: 120,
      }}
      onChange={handleChange2}
      options={[
        {
          value: '已完成',
          label: '已完成',
        },
        {
          value: '未完成',
          label: '未完成',
        },
      
      ]}
    />

     <DatePicker onChange={onChange2} />





       <Select
       className='da'
      defaultValue={'已完成'}
      style={{
        width: 120,
      }}
      onChange={handleChange4}
      options={[
        {
          value: '已完成',
          label: '已完成',
        },
        {
          value: '未完成',
          label: '未完成',
        },
      
      ]}
    />
     <DatePicker onChange={onChange4}  className='da' />
       <div className='chart2'>
          <Mycharts option={option3} width="50%" height="400px" data={data3}></Mycharts>
           <Mycharts option={option4} width="50%" height="400px" data={data4}></Mycharts>
       </div>
    </div>
  )
}

export default Index
